{% extends "../../views/master.html" %}

{% block content %}

<div id="content">

</div>
<script type='text/javascript' src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="/_ah/channel/jsapi"></script>
<script src="http://localhost:8123/game/libs/easyXDM.min.js" type="text/javascript"></script> 
<script type='text/javascript'>

var onMessage = function(data) {
	
		console.log(data);
		var xdm = new easyXDM.Socket({
			onMessage: function(message, origin){
			console.log("Received '" + message + "' from '" + origin + "'");
			
			}
		});
		xdm.postMessage(data.data);
		$("#content").append(data.data + "<br />");
	
	};
	
var sendMessage = function(message) {
	var url = "/sites/channel";
	var data = {"message" : message, "recipient" : {{recipient}}};
	$.ajax({
		  type: 'POST',
		  url: url,
		  data: data
		});
}

var init = function() {
	
	//alert("init");
	
	$("#btn-send").bind("click", function() {
		var message = $("#fld-message").val();
		console.log(message)
		sendMessage(message);
	});
	
	
	var onOpened = function() {
		$("#content").append("connected... <br />");
	};
	var onError = function() {alert("error!")};
	var onClose = function() {alert("closed!")};

    channel = new goog.appengine.Channel('{{channel_token}}');
    socket = channel.open();
    socket.onopen = onOpened;
    socket.onmessage = onMessage;
    socket.onerror = onError;
    socket.onclose = onClose;	
}

$(window).load(init);

</script>

<input type="text" name="message" id="fld-message" value="" /> <button id="btn-send">send</button>

{% endblock %}